<template>
  <div>
    <!-- 热度规则定义 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" @click="addHandle">新增</el-button>
      </template>
    </FilterTable>
    <BaseDialog
      :visible.sync="visible"
      :title="dialogTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <clueFeverModal :type="handleType" :rowData="formData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import clueFeverModal from './clueFeverModal';
import { getClueParameter,updateRankById } from '@/api/potenCus/basedata/clueFever';
export default {
  name: 'clueFever',
  mixins: [dictionary],
  components: {
    clueFeverModal,
  },
  props: {
    dataType: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      fetchParams: {
        level:this.dataType,// 级别1：线索热度 级别2：线索规则
        pageNum: 1,
        limit: 20,
      },
      dataSource:[],
      visible: false,
      dialogTitle: '',
      fetchApi: getClueParameter,
      columns: this.createTableColumns(),
      handleType: '',
      formData: {},
      conf:{ add: '新增', edit: '编辑', show: '显示' }
    };
  },
  watch: {
    fetchParams() {
      this.getClueParameter()
    },
  },
  created() {
    this.getClueParameter()
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 130,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.updateRank(props.row,1)}>
                  上移
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.updateRank(props.row,2)}>
                  下移
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '线索热度',
          dataIndex: 'parentName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '规则描述（同时满足以下情况）',
          dataIndex: 'remark',
          render: props => {
            return <span>({props.row.frequencyMin}, {props.row.frequencyMax || '-'}) ; {props.row.clueSourceBigName || '全部'} ; {this.createDictText(props.row.clueType, '7019') || '全部'}</span>;
          }
        },
        {
          title: '是否有效',
          dataIndex: 'isValid',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
	        render: props => {
	          return <span>{this.createDictText(props.row.isValid, '1004')}</span>;
	        }
        },
      ];
    },
    async getClueParameter() {
      const res = await getClueParameter(this.fetchParams);
      // console.log('潜客来源', res)
      if (res.resultCode === 200) {
        this.dataSource = res.data.records
        console.log(this.dataSource)
      }
    },
    addHandle() {
      this.handleType = 'add';
      this.showHandler();
    },
    editHandle(row) {
      this.handleType = 'edit';
      this.formData = row;
      this.showHandler();
    },
    async updateRank(row,move){
      console.log(row,move)
      let index = 0,params = {};
      this.dataSource.map((x,i)=>{
        if (x.id === row.id) {
          index = i
        }
      })
      if (move === 1) {
        if (!this.dataSource[index-1]) {
          this.$message.info('已经是最高级');
          return false;
        }
        params = {
          bigId: row.id,
          bigRank: row.rank,
          move:move,
          smallId: this.dataSource[index-1].id,
          smallRank: this.dataSource[index-1].rank,
        }
      } else {
        if (!this.dataSource[index+1]) {
          this.$message.info('已经是最低级');
          return false;
        }
        params = {
          bigId: this.dataSource[index+1].id,
          bigRank: this.dataSource[index+1].rank,
          move:move,
          smallId: row.id,
          smallRank: row.rank,
        }
      }
      const res = await updateRankById(params);
      // console.log('潜客来源', res)
      if (res.resultCode === 200) {
        this.$message.success('保存成功');
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
      // let before =
    },
    showHandler() {
      this.dialogTitle = `热度规则${this.conf[this.handleType]}`;
      this.visible = true;
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }

  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>

<style lang="less" scoped>
</style>
